<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <style>
        .grid {
            padding: 4px;
        }
        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }
        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }
        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }
        .icon_search {
            margin: 8px 8px 0;
        }
        .edui-default .edui-editor{
            z-index: 0 !important;
        }
        .images{
            max-width: 200px;
            max-height: 200px;
        }
        .layui-form-label{
            width: 90px;
        }
    </style>
    {block name="css"}
    {/block}
</head>
<body>

<div class="layui-form" style="padding: 20px 0 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-inline" style="margin-right: 10px;">
            <input type="text" name="image" autocomplete="off"
            class="layui-input">
        </div>
        <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-image">上传图片</button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">门店名称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickname"autocomplete="off"
                   lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-inline">
            <input type="text" name="tel"autocomplete="off"
                   lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属省市</label>
        <div class="layui-input-inline" style="margin-right: 10px;">
            <select id="select_province" lay-verify="required" name="province_id" lay-filter="province">
            <option value="">请选择</option>
            {foreach $province as $k=>$v}
            <option value="{$v.id}">{$v.name}</option>
            {/foreach}
            </select>
        </div>
        <div class="layui-input-inline" style="margin-right: 10px;">
            <select id="select_city" lay-verify="required" name="city_id" lay-filter="city">
                <option value="">请选择</option>

            </select>
        </div>
        <div class="layui-input-inline" style="margin-right: 10px;">
            <select id="select_area" lay-verify="required" name="area_id" lay-filter="area">
                <option value="">请选择</option>

            </select>
        </div>
    </div>
    <div class="layui-form-item" lay-filter="sex">
        <label class="layui-form-label">设为默认门店</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="是">
            <input type="radio" name="status" value="2" title="否" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <input type="text" id="address" name="address" lay-verify="required" autocomplete="off"
            class="layui-input">
        </div>
    </div>
    <input type="hidden" name="x" id="x">
    <input type="hidden" name="y" id="y">
    <div id="container" style="width:80vw; height:500px;margin:0 auto;margin-bottom: 50px;"></div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">可预约时间段</label>
        <label class="layui-form-label">下午场</label>
        <div class="layui-inline">
            <select  name="xw_f" lay-filter="xw">
                {foreach $xw_time as $k=>$v}
                <option value="{$v}">{$v}</option>
                {/foreach}
            </select>
        </div>-&nbsp
        <div class="layui-inline">
            <select name="xw_l" lay-filter="xw">
                {foreach $xw_time as $k=>$v}
                <option value="{$v}">{$v}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <label class="layui-form-label">晚上场</label>
        <div class="layui-inline">
            <select name="ws_f" lay-filter="ws">
                {foreach $ws_time as $k=>$v}
                <option value="{$v}">{$v}</option>
                {/foreach}
            </select>
        </div>-&nbsp
        <div class="layui-inline">
            <select name="ws_l" lay-filter="ws">
                {foreach $ws_time as $k=>$v}
                <option value="{$v}">{$v}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <label class="layui-form-label">修仙场</label>
        <div class="layui-inline">
            <select name="xx_f" lay-filter="ws">
                {foreach $xx_time as $k=>$v}
                <option value="{$v}">{$v}</option>
                {/foreach}
            </select>
        </div>-&nbsp
        <div class="layui-inline">
            <select name="xx_l" lay-filter="ws">
                {foreach $xx_time as $k=>$v}
                <option value="{$v}">{$v}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">登录账号</label>
        <div class="layui-input-inline">
            <input type="text" name="username"autocomplete="off"
                   lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">登录密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password"autocomplete="off"
                   lay-verify="required" class="layui-input">
        </div>
    </div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=BMCBZ-FRTWD-NAW47-HJ5YN-YTDQ7-MNBJ3"></script>
<script>
    var marker = '';
    var maker_count= []
    function makeMap(Dom) {
        var map = new qq.maps.Map(document.getElementById(Dom), {
            minZoom: 10,             //此处设置地图的缩放级别  最小值是6
            maxZoom: 18,            //此处设置地图的缩放级别  最大值是7
            zoom: 12,                //默认的缩放级别是10
            center: new qq.maps.LatLng(39.916527,116.397128),      //设置中心点样式
            mapTypeId: qq.maps.MapTypeId.ROADMAP,  //设置地图样式详情参见MapType
        });
        qq.maps.event.addListener(map, 'click', function (event) {
            maker_count.forEach(val=>{
                val.setMap(null)
            })
            var marker = new qq.maps.Marker({
                position: event.latLng,
                map: map,
            });
            if (marker == '') {
            } else {
                marker.setPosition(event.latLng)
            }
            maker_count.push(marker)
            $("#x").val(event.latLng.lng);
            $("#y").val(event.latLng.lat);
            get_address(event.latLng.lng,event.latLng.lat)
        })

    }
    //根据经纬度获取地址
    function get_address(lng,lat){
        $.post("{:url('dt')}",{x:lng,y:lat},function (res) {
            if(res){
                $("#address").val(res.data);
            }
        })
    }
    function init() {
        //设置地图中心点}
        makeMap('container')


        //根据经纬度获取地址
        // function get_address(lng, lat) {
        //     $.post('/console/system/get_address.html', {lng: lng, lat: lat}, function (res) {
        //         if (res) {
        //             $("#input_search").val(res)
        //         }
        //     })
        // }
        $("#address").blur(function () {
            var str = $(this).val();
            console.log(str);
            var myLatlng = new qq.maps.LatLng(39.916527, 116.397128);
            var map = new qq.maps.Map(document.getElementById('container'), {
                minZoom: 10,             //此处设置地图的缩放级别  最小值是6
                maxZoom: 18,            //此处设置地图的缩放级别  最大值是7
                zoom: 12,                //默认的缩放级别是10
                center: myLatlng,      //设置中心点样式
                mapTypeId: qq.maps.MapTypeId.ROADMAP,  //设置地图样式详情参见MapType
            });
            qq.maps.event.addListener(map, 'click', function (event) {
                maker_count.forEach(val=>{
                    val.setMap(null)
                })
                var marker = new qq.maps.Marker({
                    position: event.latLng,
                    map: map,
                });
                if (marker == '') {
                } else {
                    marker.setPosition(event.latLng)
                }
                maker_count.push(marker)
                $("#x").val(event.latLng.lng);
                $("#y").val(event.latLng.lat);
                get_address(event.latLng.lng,event.latLng.lat)
            })
            if (str != '') {
                $.post("{:url('jwx')}", {address: str}, function (res) {
                    if (res.data.result) {
                        $("#x").val(res.data.result.location.lng);
                        $("#y").val(res.data.result.location.lat);
                        map.panTo(new qq.maps.LatLng(res.data.result.location.lat, res.data.result.location.lng))
                        //console.log(map.getCenter())
                        // if (marker == '') {
                        //     marker = new qq.maps.Marker({
                        //         position: map.getCenter(),
                        //         map: map,
                        //     });
                        // } else {
                        //     marker.setPosition(map.getCenter())
                        // }
                        maker_count.forEach(val=>{
                            val.setMap(null)
                        })
                        var marker = new qq.maps.Marker({
                            position: map.getCenter(),
                            map: map,
                        });
                        if (marker == '') {
                        } else {
                            marker.setPosition(map.getCenter())
                        }
                        maker_count.push(marker)
                    }
                })
            }
        })
    }

    //异步加载地图库函数文件
    function loadScripts() {
        //创建script标签
        var script = document.createElement("script");
        //设置标签的type属性
        script.type = "text/javascript";
        //设置标签的链接地址
        script.src = "https://map.qq.com/api/js?v=2.exp&key=KE5BZ-NNBC3-XX73T-YE4K5-H5NJJ-7AFVL&callback=init";
        //添加标签到dom
        document.body.appendChild(script);
    }

    //添加标记
    function addMarker(location) {
        var marker = new qq.maps.Marker({
            position: location,
            map: mapb
        });
        markersArray[0]=marker;
    }

    console.log(loadScripts);
    window.onload = loadScripts;    // dom文档加载结束开始加载 此段代码
</script>
<script>

    layui.config({
        base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload','layer','laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload
            , laydate = layui.laydate;
        //省市区操作
        form.on('select(province)', function(data){
            $.ajax({
                url:"{:url('ssq')}",
                method:'POST',
                data:{id:data.value},
                success:function(res){
                    var html = '<option value="">请选择</option>';
                    $("#select_area").html(html);
                    for(var i = 0;i<res.data.length;i++)
                    {
                        html += '<option value="'+res.data[i]['id']+'">'+res.data[i]['name']+'</option>'
                    }
                    $("#select_city").html(html);
                    form.render('select');
                }
            })
        });
        form.on('select(city)', function(data){
            $.ajax({
                url:"{:url('ssq')}",
                method:'POST',
                data:{id:data.value},
                success:function(res){
                    var html = '<option value="">请选择</option>';
                    for(var i = 0;i<res.data.length;i++)
                    {
                        html += '<option value="'+res.data[i]['id']+'">'+res.data[i]['name']+'</option>'
                    }
                    $("#select_area").html(html);
                    form.render('select');
                }
            })
        });
        form.on('select(area)', function(data){
            console.log(6666);
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });
        upload.render({
            elem: '#layuiadmin-upload-image'
            , url: "{:url('file_y')}"
            , accept: 'images'
            , method: 'post'
            , acceptMime: 'image/*'
            , done: function (res) {
                if(res.code == 200){
                    layer.msg('上传成功');
                    console.log(res.data);
                    $(this.item).prev("div").children("input").val(res.data.file)
                }else{
                    layer.msg(res.message);
                }
            }
        });
        //自定义验证
        form.verify({
            nickname: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
            ,fd_number:[/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,'只支持2位小数的数字']
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]

            //确认密码
            ,repass: function(value){
                if(value !== $('#LAY_password').val()){
                    return '两次密码输入不一致';
                }
            }
        });
        $('body').on('keyup', '.icon_search_input', function(){
            var keyword  = $.trim($(this).val());
            if (!keyword) {
                $(this).closest('.icon_select_options').find('li').show();
            } else {
                $(this).closest('.icon_select_options').find('li').each(function(){
                    var className = $(this).find('i').attr('class');
                    if (className.indexOf(keyword) >=0) {
                        $(this).show()
                    } else {
                        $(this).hide()
                    }
                })
            }
        })

    })
</script>

</body>
</html>